// +----------------------------------------------------------------------
// | LikeShop100%开源免费商用电商系统
// +----------------------------------------------------------------------
// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
// | 开源版本可自由商用，可去除界面版权logo
// | 商业版本务必购买商业授权，以免引起法律纠纷
// | 禁止对系统程序代码以任何目的，任何形式的再发布
// | Gitee下载：https://gitee.com/likemarket/likeshopv2
// | 访问官网：https://www.likemarket.net
// | 访问社区：https://home.likemarket.net
// | 访问手册：http://doc.likemarket.net
// | 微信公众号：好象科技
// | 好象科技开发团队 版权所有 拥有最终解释权
// +----------------------------------------------------------------------
// | Author: LikeShopTeam
// +----------------------------------------------------------------------


<template>
    <div class="user-wallet">
        <div class="contain bg-white mb10">
            <div class="header">
                <div class="white mb10">
                    <div class="xs">总资产（元）</div>
                    <price-slice
                        :price="userObj.user_money"
                        firstClass="walletSize"
                        secondClass="walletSize"
                    />
                </div>
                <div class="money white row">
                    <div class="item">
                        <div class="xs mb5">累计消费(元)</div>
                        <price-slice 
                            :price="userObj.total_order_amount || '0'"
                            firstClass="home-new-goods-size"
                            secondClass="home-new-goods-size"
                        />
                    </div>
                </div>
            </div>
            <div class="nav row">
                <div class="nav-item column-center" @click="goPage('userBill', {index: 0})">
                    <img class="nav-item-img" src="@A/images/icon_account.png" />
                    <div class="mt5">账户明细</div>
                </div>
                <div class="nav-item column-center" @click="goPage('userBill', {index: 1})">
                    <img class="nav-item-img" src="@A/images/icon_consume.png" />
                    <div class="mt5">消费记录</div>
                </div>
            </div>
            <div class="activity">
                <div class="activity-title xl">
                    热门活动
                </div>
                <div class="activity-header row">
                    <router-link :to="{name: 'signUp'}" class="activity-header-left">
                        <div class="lg" style="font-weight: bold;text-align: left;">签到领积分</div>
                        <div class="xs" style="text-align: left;">赚积分抵现金</div>
                    </router-link>
                    <router-link :to="{name: 'couponCenter'}" class="activity-header-right ml10">
                        <div class="lg" style="font-weight:bold;text-align: left;">领取优惠券</div>
                        <div class="xs" style="text-align: left;">满减享优惠</div>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {getWallet} from '@API/user'
export default {
    name: "userWallet",
    data() {
        return {
            userObj: {}
        }
    },
    methods: {
        goPage: function(name, value) {
            this.$router.push({name: name, query: value});
        },
        $getWallet() {
            getWallet().then(res => {
                if(res.code == 1) {
                    this.userObj = res.data;
                }
            })
        }
    },
    mounted() {
        this.$getWallet();
    }
}
</script>

<style lang="scss" scoped>
img {
    width: 100%;
    height: 100%;
}
.user-wallet {
    .contain {
        padding: 10px 15px 18px;
        text-align: left;
        .header {
            position: relative;
            background:linear-gradient(180deg,rgba(255,44,60,1) 0%,rgba(255,49,106,1) 100%);
            border-radius: 10px;
            height: 160px;
            padding: 25px 15px 15px;
            box-sizing: border-box;
            .btn {
                position: absolute;
                height: 29px;
                right: 15px;
                top: 25px;
                padding: 0 25px;
                border: none;
                margin: 0;
                font-weight: normal;
                font-size: 14px;
            }
            .money {
                .item {
                    flex: 1;
                }
            }
        }
        .nav {
            border-bottom: $--border-base;
            .nav-item {
                flex: 1;
                padding: 20px 0;
                .nav-item-img {
                    width: 31px;
                    height: 31px;
                }
            }
        }
        .activity {
            padding: 20px 0px;
            .activity-title {
                font-weight: bold;
            }
            .activity-header {
                margin-top: 15px;
                .activity-header-left {
                    padding: 22px 15px;
                    color: #1579DC;
                    width: 167.5px;
                    background-size: 100% 100%;
                    background-image: url();
                }
                .activity-header-right {
                    padding: 22px 15px;
                    color: $--color-primary;
                    width: 167.5px;
                    background-size: 100% 100%;
                    background-image: url();
                }
            }
            .activity-items-contain {
                flex-wrap: wrap;
                .activity-item {
                    padding: 17px 0;
                    width: 167.5px;
                    .activity-img {
                        width: 37px;
                        height: 37px;
                    }
                }
            }
        }
    }
}
</style>